<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="销售订单号" name="销售订单号"
      [(ngModel)]="fifter.SaleOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料编码/名称" [(ngModel)]="fifter.PartName">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="客户名称" [(ngModel)]="fifter.CustomerName">
    <d-range-datepicker-pro name="制单日期" [placeholder]="['制单日期：起始','制单日期：截止']" [(ngModel)]="creatTime"
      (ngModelChange)="dateChange()"></d-range-datepicker-pro>
    <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter2()"><i
        class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
    [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"  [maxHeight]="tableheight"
    (checkAllChange)="getCheckedRows();getCheckedRowsData()" (rowCheckChange)="getCheckedRows();getCheckedRowsData()" [resizeable]="true">
      <thead dTableHead [checkable]="true" *ngIf="data !== '工单'">
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [fixedLeft]="colOption.fixedLeft">{{
            colOption.header }}</th>
        </tr>
      </thead>
      <thead dTableHead  *ngIf="data == '工单'">
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="'0px'">选择</th>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [fixedLeft]="colOption.fixedLeft">{{
            colOption.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [fixedLeft]="'0px'" *ngIf="data !== '工单'">
              <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)" [disabled]="this.data.saleOrderPartId.includes(rowItem.saleOrderPartId)"></d-checkbox>
            </td>
            <td dTableCell [fixedLeft]="'0px'" *ngIf="data == '工单'">
              <label class="custom-radio">
                <input type="radio" name="radio-group" (change)="radio($event,rowItem)">
                <span class="checkmark"></span>
              </label>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedLeft]="'80px'">
              <span dTooltip [content]="rowItem?.saleOrderNum">{{ rowItem?.saleOrderNum }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.saleOrder?.customerName">{{ rowItem?.saleOrder?.customerName }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.partNum">{{ rowItem?.partNum }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.partName">{{ rowItem?.partName }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partType">{{ rowItem.partType }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partUOM">{{ rowItem.partUOM }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.quantity">{{ rowItem.quantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.soldQuantity">{{ rowItem.soldQuantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="(rowItem.quantity - rowItem.soldQuantity).toString()">{{ rowItem.quantity - rowItem.soldQuantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.produceQuantity">{{ rowItem.produceQuantity }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.priceWithTax">{{ rowItem.priceWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.amountWithTax">{{ rowItem.amountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.taxAmount">{{ rowItem.taxAmount }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.amountWithTax">{{ rowItem.amountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountPriceWithTax">{{ rowItem.discountPriceWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountAmountWithTax">{{ rowItem.discountAmountWithTax }}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.discountTaxAmount">{{ rowItem.discountTaxAmount }}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{CheckedRows.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination
      [size]="'sm'"
      [canViewTotal]="true"
      [canChangePageSize]="true"
      [maxItems]="5"
      [total]="this.pager.total"
      [pageSizeOptions]="this.pageSizeOptions"
      [(pageSize)]="fifter.PageSize"
      [(pageIndex)]="fifter.PageNumber"
      (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)"
    >
    </d-pagination>
  </div>
</div>
